<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
      style="width: 268px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          <div
            class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
          >
            <div
              class="ant-space-item"
            >
              <span>
                Department One
              </span>
            </div>
            <div
              class="ant-space-item"
            >
              <span
                aria-label="right"
                class="anticon anticon-right"
                role="img"
                style="color: rgba(0, 0, 0, 0.88);"
              >
                <svg
                  aria-hidden="true"
                  data-icon="right"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
                  />
                </svg>
              </span>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-extra"
        >
          <span
            aria-label="ellipsis"
            class="anticon anticon-ellipsis"
            role="img"
          >
            <svg
              aria-hidden="true"
              data-icon="ellipsis"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
              />
            </svg>
          </span>
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-statistic-card-content "
        >
          <div
            class="ant-pro-card-statistic"
          >
            <div
              class="ant-pro-card-statistic-wrapper"
            >
              <div
                class="ant-pro-card-statistic-content"
              >
                <div
                  class="ant-statistic ant-pro-card-statistic-layout-vertical"
                >
                  <div
                    class="ant-statistic-content"
                  >
                    <span
                      class="ant-statistic-content-prefix"
                    >
                      ¥
                    </span>
                    <span
                      class="ant-statistic-content-value"
                    >
                      <span
                        class="ant-statistic-content-value-int"
                      >
                        1,102,893
                      </span>
                    </span>
                  </div>
                </div>
                <div
                  class="ant-pro-card-statistic-description"
                >
                  <div
                    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
                  >
                    <div
                      class="ant-space-item"
                    >
                      <div
                        class="ant-pro-card-statistic"
                      >
                        <div
                          class="ant-pro-card-statistic-wrapper"
                        >
                          <div
                            class="ant-pro-card-statistic-content"
                          >
                            <div
                              class="ant-statistic ant-pro-card-statistic-layout-inline"
                            >
                              <div
                                class="ant-statistic-title"
                              >
                                Actual Completion
                              </div>
                              <div
                                class="ant-statistic-content"
                              >
                                <span
                                  class="ant-statistic-content-value"
                                >
                                  82.3%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="ant-space-item"
                    >
                      <div
                        class="ant-pro-card-statistic"
                      >
                        <div
                          class="ant-pro-card-statistic-wrapper"
                        >
                          <div
                            class="ant-pro-card-statistic-content"
                          >
                            <div
                              class="ant-statistic ant-pro-card-statistic-layout-inline"
                            >
                              <div
                                class="ant-statistic-title"
                              >
                                Current Target
                              </div>
                              <div
                                class="ant-statistic-content"
                              >
                                <span
                                  class="ant-statistic-content-value"
                                >
                                  ¥6000
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="ant-pro-statistic-card-chart"
          >
            <img
              alt="chart"
              src="https://gw.alipayobjects.com/zos/alicdn/BA_R9SIAV/charts.svg"
              width="100%"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            extra
          </strong>
          : 卡片右上角操作区域，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            statistic
          </strong>
          : 统计信息配置对象
        </li>
        <li>
          <strong>
            chart
          </strong>
          : 图表区域，可以是图片或图表组件
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象
        </li>
      </ul>
      <h4>
        Statistic 配置对象属性：
      </h4>
      <ul>
        <li>
          <strong>
            value
          </strong>
          : 统计数值，可以是数字或字符串
        </li>
        <li>
          <strong>
            prefix
          </strong>
          : 数值前缀，如货币符号 '¥'
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 数值后缀，如单位 '%'
        </li>
        <li>
          <strong>
            description
          </strong>
          : 统计描述，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            precision
          </strong>
          : 数值精度，控制小数位数
        </li>
      </ul>
      <h4>
        Statistic 子组件 Props：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            value
          </strong>
          : 统计项数值
        </li>
        <li>
          <strong>
            prefix
          </strong>
          : 统计项前缀
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 统计项后缀
        </li>
      </ul>
      <h4>
        Chart 区域说明：
      </h4>
      <ul>
        <li>
          <strong>
            图片图表
          </strong>
          : 使用 img 标签显示静态图表
        </li>
        <li>
          <strong>
            动态图表
          </strong>
          : 可以集成 ECharts、AntV 等图表库
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 图表会自动适配容器宽度
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            数据展示
          </strong>
          : 展示关键业务指标和统计数据
        </li>
        <li>
          <strong>
            仪表盘
          </strong>
          : 构建数据仪表盘和监控面板
        </li>
        <li>
          <strong>
            报表
          </strong>
          : 生成各类统计报表
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>